<template>
  <div>
    <van-button @click="btnFn" type="primary">弹窗确认框</van-button>
    <van-button type="success" @click="show=true">组件的方式调用dialog组件</van-button>
    <van-button type="default">默认按钮</van-button>
    <van-button type="warning">警告按钮</van-button>
    <van-button type="danger">危险按钮</van-button>
    <!-- 组件调用的方式使用dialog -->
    <van-dialog v-model="show" title="标题" show-cancel-button @confirm="confirmFn" @cancel="cancelFn">
      <div>测试彩色</div>
    </van-dialog>
  </div>
</template>

<script>
export default {
  data(){
    return {
      show: false
    }
  },
  methods: {
    btnFn(){
      this.$dialog.confirm({
        title: '标题',
        message: '弹窗内容',
      })
        .then(() => {
          // on confirm
          console.log("确认了");
        })
        .catch(() => {
          // on cancel
          console.log("取消了");
        });
    },
    confirmFn(){
      console.log("确认了！");
    },
    cancelFn(){
      console.log("取消了！");
    }
  }
}
</script>

<style scoped>
.router-link-active{
  color: red;
  background-color: blue;
}
</style>